<script setup lang="ts">
  import { getMenuList } from '@/api/menu';
  import { Message, TableInstance, Tag } from '@arco-design/web-vue';
  import { deleteMenu } from '@/api/syssetting';
  import Add from './add/index.vue';
  import Edit from './edit/index.vue';
  import { deepTree } from '@/utils/utils';
  import { ref } from 'vue';
  const proTableRef = ref<TableInstance | null>(null);
  defineOptions({
    name: 'menuRoleAuth',
  });
  const visible = ref(false);
  const currentParams = ref();
  const visible1 = ref(false);
  const formType = [
    {
      name: 'menu_name',
      label: '菜单名称',
      type: 'a-input',
      fieldProps: {
        span: 8,
      },
    },
    {
      name: 'menu_type',
      label: '菜单类型',
      type: 'a-select',
      fieldProps: {
        span: 8,
      },
      selectOptions: [
        {
          value: 1,
          label: '目录',
        },
        {
          value: 2,
          label: '菜单',
        },
        {
          value: 3,
          label: '按钮',
        },
      ],
    },
    {
      name: 'menu_state',
      label: '菜单状态',
      slotName: 'status',
      type: 'a-select',
      fieldProps: {
        span: 8,
      },
      selectOptions: [
        {
          status: 'success',
          value: 1,
          label: '正常',
        },
        {
          status: 'danger',
          value: 2,
          label: '禁用',
        },
      ],
    },
  ];
  const tableType = [
    {
      title: '菜单名称',
      dataIndex: 'menu_name',
    },
    {
      title: '菜单类型',
      dataIndex: 'menu_type',
      slotName: 'tags',
      align: 'center',
      options: [
        { color: 'magenta', value: 1, label: '目录' },
        { color: 'blue', value: 2, label: '菜单' },
        { color: 'orangered', value: 3, label: '按钮' },
      ],
    },
    {
      title: '菜单图标',
      dataIndex: 'menu_icon',
      slotName: 'icon',
      align: 'center',
    },
    {
      title: '路由路径',
      dataIndex: 'menu_route_path',
    },
    {
      title: '组件路径',
      dataIndex: 'menu_component_path',
    },
    {
      title: '权限标识',
      dataIndex: 'menu_auth',
    },
    {
      title: '是否显示',
      dataIndex: 'menu_show',
      slotName: 'tags',
      align: 'center',
      options: [
        {
          value: 1,
          label: '显示',
          color: 'green',
        },
        {
          value: 2,
          label: '隐藏',
          color: 'red',
        },
      ],
    },
    {
      title: '路由参数',
      dataIndex: 'menu_route_params',
    },
    {
      title: '菜单状态',
      dataIndex: 'menu_state',
      slotName: 'status',
      align: 'center',
      options: [
        {
          status: 'success',
          value: 1,
          label: '正常',
        },
        {
          status: 'danger',
          value: 2,
          label: '禁用',
        },
      ],
    },
    {
      title: '排序',
      dataIndex: 'menu_sort',
      align: 'center',
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: [
        {
          name: '新增',
          onClick: (record: any) => {
            visible.value = true;
            currentParams.value = {
              id: record.menu_id,
            };
          },
        },
        {
          name: '编辑',
          onClick: (record: any) => {
            visible1.value = true;
            currentParams.value = {
              id: record.menu_id,
            };
          },
        },
        {
          name: '删除',
          onClick: (record: any) => {
            deleteMenu({
              menu_ids: [record.menu_id],
            }).then((res: any) => {
              proTableRef.value?.setRefresh();
              Message.success('删除成功！');
            });
          },
        },
      ],
    },
  ];
  const sonFormType = ref();
  const addUniqueKey = (node: any) => {
    node.key = node.menu_id.toString(); // 核心逻辑
    if (node.children?.length) {
      node.children = node.children.map((child: any) => addUniqueKey(child));
    }
    return node;
  };
  const treeData1 = ref();
  async function request(params: any) {
    const res = await getMenuList(params);
    const treeData = res.data.list.map((node: any) => addUniqueKey(node));
    treeData1.value = deepTree(
      'menu_name',
      res.data.list,
      'menu_id',
      'menu_id',
      'luyouyemian'
    );

    treeData1.value.unshift({
      title: '顶级菜单',
      key: 0,
      id: 0,
    });

    sonFormType.value = [
      {
        name: 'menu_type',
        label: '菜单类型',
        type: 'a-radio-group',
        fieldProps: {
          span: 24,
          defaultValue: 1,
        },
        options: [
          {
            value: 1,
            label: '目录',
          },
          {
            value: 2,
            label: '菜单',
          },
          {
            value: 3,
            label: '按钮',
          },
        ],
      },
      {
        name: 'menu_parent_id',
        label: '父级菜单',
        type: 'a-tree-selectPolicy',
        placeholder: '默认顶级菜单',
        fieldProps: {
          span: 24,
          data: treeData1.value ? treeData1.value : [],
        },
      },
      {
        name: 'menu_name',
        label: '菜单名称',
        type: 'a-input',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            message: '请输入菜单图标',
            required: true,
          },
        ],
      },
      {
        name: 'menu_icon',
        label: '菜单图标',
        type: 'SelectIcon',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            message: '请选择菜单图标',
            required: true,
          },
        ],
      },
      {
        name: 'menu_route_path',
        label: '路由路径',
        type: 'a-input',
        rules: [
          {
            message: '请输入路由路径',
            required: true,
          },
        ],
        fieldProps: {
          span: 24,
        },
      },

      {
        name: 'menu_component_path',
        label: '组件路径',
        type: 'a-input',
        rules: [
          {
            message: '请输入组件路径',
            required: true,
          },
        ],
        fieldProps: {
          span: 24,
        },
      },
      {
        name: 'menu_auth',
        label: '权限标识',
        type: 'a-input',
        extra: '页面接口权限标识，例：/doc/index',
        rules: [
          {
            message: '请输入',
            required: true,
          },
        ],
        fieldProps: {
          span: 24,
          placeholder: '请输入',
        },
      },
      {
        name: 'menu_route_params',
        label: '路由参数',
        type: 'a-input',
        extra: '访问路由的默认传递参数',
        fieldProps: {
          span: 24,
        },
      },
      {
        name: 'menu_show',
        label: '是否显示',
        type: 'a-radio-group',
        extra: '选择隐藏则路由将不会出现在侧边栏，但仍然可以访问',
        fieldProps: {
          span: 24,
          defaultValue: 1,
        },
        options: [
          {
            value: 1,
            label: '显示',
          },
          {
            value: 2,
            label: '隐藏',
          },
        ],
      },
      {
        name: 'menu_state',
        label: '菜单状态',
        type: 'a-radio-group',
        extra: '选择停用则路由将不会出现在侧边栏，也不能被访问',
        fieldProps: {
          span: 24,
          defaultValue: 1,
        },

        options: [
          {
            value: 1,
            label: '正常',
          },
          {
            value: 2,
            label: '禁用',
          },
        ],
      },
      {
        name: 'menu_sort',
        label: '菜单排序',
        type: 'a-input-number',
        extra: '数值越大越排前',
        fieldProps: {
          span: 24,
        },
      },
    ];
    return {
      data: {
        list: treeData,
        total: res.data.total || 0,
      },
    };
  }
</script>

<template>
  <div class="container">
    <pro-table
      ref="proTableRef"
      :formType="formType"
      :tableType="tableType"
      title="菜单列表"
      :request="request"
      :showExpande="true"
    >
      <template #btns>
        <a-button
          type="primary"
          style="width: 80px"
          @click="
            () => {
              currentParams = {};
              visible = true;
            }
          "
        >
          <template #icon>
            <icon-plus />
          </template>
          新增</a-button
        >
      </template>
    </pro-table>

    <Add
      v-if="visible"
      v-model:visible="visible"
      :params="currentParams"
      :form-type="sonFormType"
      @refresh="
        () => {
          $refs.proTableRef.setRefresh();
        }
      "
    />
    <Edit
      v-if="visible1"
      v-model:visible="visible1"
      :params="currentParams"
      :form-type="sonFormType"
      @refresh="
        () => {
          $refs.proTableRef.setRefresh();
        }
      "
    />
  </div>
</template>

<style scoped lang="less"></style>
